<!doctype html>
<html>
    <head>
        <title>loadTemplate Test Suite</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
        <script src="../jquery-loadTemplate/jquery.loadTemplate-1.3.2.js" type="text/javascript"></script>
        <script src="testRunner.js" type="text/javascript"></script>
        
        <!--TEST SCRIPTS-->
        <script>
            runTests([
                'files/general.js',
                'files/formatters.js',
                'files/callback.js',
                'files/error.js'
            ]);
        </script>
        
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
        <style type="text/css">
            .hide {
                display: none;
            }
            
            .red {
                background: red;
                color: white;
            }
            
            #wru div.testfile {
                padding: 10px;
                color: green;
                font-weight: bold;
            }
            
            #wru {
                font-family: sans-serif;
                font-size: 11pt;
                border: 1px solid #333;
            }
            #wru div {
                cursor: default;
                padding: 0;
                color: #000;
            }
            #wru div span,
            #wru div strong {
                display: block;
                padding: 4px;
                margin: 0;
            }
            #wru div ul {
                margin: 0;
                padding-bottom: 4px;
            }
            #wru div.pass {
                background: #90EE90;
            }
            #wru div.fail {
                background: #FF6347;
            }
            #wru div.error {
                background: #000;
                color: #FFF;
            }
        </style>
    </head>
    
    <body>
        
        <!--ELEMENT TO RENDER IN-->
        <div id="render" class="hide"><div>should disappear</div></div>
        
        <!--TEMPLATE-->
        <script type="text/html" id="template">
            <div class="container">
                <div class="name" data-content="name"></div>
                <div class= "id" data-content="id"></div>
                <input class="hidden" type="text" value="" data-value="id" />
            </div>
        </script>
        
        <!--TEMPLATE 2-->
        <script type="text/html" id="template2">
            <div class="container">
                <div class="name" data-content="name" data-format="UpperCaseFormatter"></div>
                <div class= "id" data-content="id" data-format="idFormatter"></div>
                <input class="hidden" type="text" value="" data-value="id" />
            </div>
        </script>
        
        <!--TEMPLATE 3-->
        <script type="text/html" id="template3">
            <div class="container">
                <div class="name" data-content="name" data-format="singleFormatter"></div>
                <div class= "id" data-content="id" data-format="idFormatter"></div>
                <input class="hidden" type="text" data-value="id"  data-format-target="value" data-format="singleFormatter2" />
            </div>
        </script>

        <!--THIS TEMPLATE-->
        <script type="text/html" id="thisTemplate">
            <li data-template-bind='
                {"attribute": "content", "value": "this"}'></li>
        </script>

        <!--NESTED TEMPLATE-->
        <script type="text/html" id="nestTemplate">
            <div class='single-attribute' data-content="testSingle"></div>
            <div class='template-bind-nest' data-template-bind='{"attribute": "content", "value": "testArray", "formatter": "nestedTemplateFormatter", "formatOptions": {"parentElement": "ul", "template": "#thisTemplate"}}'></div>
            <div class='attribute-nest' data-content="testArray" data-format="nestedTemplateFormatter" data-format-options='{"parentElement": "ul", "template": "#thisTemplate"}'></div>
        </script>
        
        <div id="wru"></div>
        <script src="wru.js" type="text/javascript"></script>
    </body>
</html>
